<template>
	<view class="content" style="padding-bottom:182rpx">
        <u-navbar :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="新增人员离场">
        </u-navbar>

        <view class="uni-area">
            <!-- 离场时间 -->
            <view class="u-m-t-50">
                <text class="u-font-32 font-bold">离场时间</text>
                <view class="u-m-t-20" @tap.stop="showDatetime=saveResult.id?false:true">
                    <u--input disabled 
                        fontSize="28rpx" prefixIcon="calendar" prefixIconStyle="font-size:48rpx;color:#909399"
                        v-model="submitData.lcsj">
                    </u--input>
                </view>
            </view>
       
            <!-- 离场原因 -->
            <view class="u-m-t-50">
                <view class="u-font-32 font-bold">离场原因</view>
                <u--textarea class="u-m-t-20 textarea" 
                    v-model="submitData.sgxkbh" :disabled="saveResult.id?true:false" :autoHeight="true" 
                    placeholder="请输入离场原因" placeholderClass="uni-placeholder">
                </u--textarea>
            </view>


            <!-- 离场人员 -->
            <view v-if="saveResult.id" class="u-m-t-50">
                <view class="u-flex u-row-between u-font-28">
                    <text class="u-font-32 font-bold">离场人员</text>
                    <text class="uni-higt-color" @tap.stop="menuSkip('/pages/member-bag/list?type=leave&ywbh='+saveResult.id)">选择离场人员</text>
                </view>
                <uni-leave class="u-m-t-20" v-for="(item,index) in staffs" :key="index" 
                    :staffItem="item"
                    @removeMember="getmemberLeaveDeatilList">
                </uni-leave>
            </view>

            <!-- 附件 -->
            <uni-accessory v-if="saveResult.id" class="u-m-t-50" :title="{title:'附件'}" :accessorys="accessoryList"
                :upload="true" :uploadParameter="uploadParameter" @uploadSucceed="uploadSucceed">
            </uni-accessory>
        </view>

        <!-- 底部操作 -->
        <view class="uni-bottom u-flex u-row-between">
            <u-button class="btn3" text="取消" @tap="back"></u-button>
            <u-button class="btn4" type="primary" :text="saveResult.id?'修改':'保存'" @tap="saveEdit"> </u-button>
        </view>


        <!-- 时间选择 -->
        <u-datetime-picker
            :show="showDatetime"
            :value="submitData.lcsj"
            mode="datetime"
            :formatter="formatter"
            closeOnClickOverlay
            @cancel="showDatetime=false"
            @close="showDatetime=false"
            @confirm="confirm">
        </u-datetime-picker>
	</view>
</template>

<script>
import {mapGetters,mapMutations} from 'vuex'
export default {
    data() {
        return {
            userInfo: uni.getStorageSync("userInfo"), // 用户信息
            showDatetime: false,
            submitData:{ // 业务保存参数
                searchTerminal: "PC",
                xmbh: uni.getStorageSync("userInfo").ssgcbh, // 项目编号
                xmmc: uni.getStorageSync("userInfo").ssgcmc, // 项目名称
                gcbh: uni.getStorageSync("userInfo").ssgcbh, // 工程编号
                gcmc: uni.getStorageSync("userInfo").ssgcmc, // 工程名称
                sgqymc: uni.getStorageSync("userInfo").ssqymc, // 施工企业名称
                lcsj: this.$moment().format('YYYY-MM-DD HH:mm'), // 离场时间
                sgxkbh: '', // 离场原因
            },
            saveResult: {}, // 保存结果
            staffs: [], // 人员明细
            accessoryList:[], // 附件
            uploadParameter: {// 上传附件的参数
                ywlx: 'salary_smzgl_rylc',
            }, 
        }
    },

    computed: {
        ...mapGetters(['leaveStaff']),
    },

    watch:{
        leaveStaff(newVal,oldVal){
            if( newVal ){
                this.leaveBindMember()
            }
        }
    },

    onLoad(option) {
        if ( option.id ) {
            this.saveResult.id = option.id
            // 获取业务明细
            this.getDetail()
            // 获取该业务人员列表
            this.getmemberLeaveDeatilList()
            // 附件
            this.getAccessoryList()
        }
    },


    methods: {
        // 返回
        back(){
            uni.navigateBack()
        },
        // 跳转
        menuSkip(url){
            uni.navigateTo({ url: url })
        },
        // 过滤时间选择器
        formatter(type, value) {
            if (type === 'year') return `${value}年`
            if (type === 'month') return `${value}月`
            if (type === 'day')  return `${value}日`
            if (type === 'hour')  return `${value}时`
            if (type === 'minute')  return `${value}分`
            return value
        },


        // 选择时间
        confirm(e){
            this.submitData.lcsj = this.$moment(e.value).format('YYYY-MM-DD HH:mm')
            this.showDatetime = false
        },


        // 人员离场绑定
        leaveBindMember(){
            uni.showLoading({ title:'人员离场中' })
            this.$request('this',this.$apis.memberLeaveBindMember,this.leaveStaff).then(res=>{
                this.getmemberLeaveDeatilList()
            })
        },
        // 人员列表
        getmemberLeaveDeatilList(){
            const pra = {
                searchTerminal: "PC",
                filter1: 'notDeptId',
                ywbh: this.saveResult.id
            }
            this.$request(this,this.$apis.memberLeaveDeatilList,pra).then(res=>{
                const { rows } = res
                // console.log('人员明细',rows)
                rows.map((v,i)=>{
                    v.gcmc = this.userInfo.ssgcmc
                    v.xmmc = this.userInfo.ssqymc
                    v.isUnfold = false // 不展开
                    v.showBtn = true
                })
                this.staffs = rows
            })
        },


        // 业务明细
        getDetail(){
            const api = JSON.parse(JSON.stringify(this.$apis.leaveLookDetail))
            api.url+=this.saveResult.id
            this.$request('this',api,{}).then(res=>{
                // console.log('业务明细',res)
                this.saveResult = res
                this.submitData.lcsj =  this.$moment(res.lcsj).format('YYYY-MM-DD HH:mm')
                this.submitData.sgxkbh = res.sgxkbh
            })
        },


        // 保存&修改
        saveEdit(){
            if( !this.submitData.sgxkbh ){
                uni.$u.toast('请输入离场原因')
            }else{
                let api = JSON.parse(JSON.stringify(this.$apis.memberLeaveSaveEdit))
                let par = {}
                if( this.saveResult.id ) { // 修改
                    api.type = 'PUT'
                    par = Object.assign(this.saveResult,this.submitData)
                }else{ // 新增
                    api.type = 'POST'
                    par = this.submitData
                }
                this.$request(this,api,par).then(res=>{
                    if( this.saveResult.id ){
                        uni.$u.toast('修改成功',1500)
                        setTimeout(()=>{ 
                            this.back() 
                        },1500)
                    }else{
                        // console.log('新增离场保存',res)
                        this.saveResult = res
                        this.getAccessoryList()
                    }
                }).then()
            }
        },


        // 附件列表
        getAccessoryList(){
            const parameter = {
                ywlx: this.uploadParameter.ywlx, // 业务类型
                ywbh: this.saveResult.id, // 业务编号
            }
            uni.showLoading({ title:'附件列表获取中' })
            this.$request(this,this.$apis.MemberAtta,parameter).then(res=>{
                this.accessoryList = res
                if( res ){
                    this.uploadParameter.bid = this.saveResult.id
                    this.uploadParameter.attachType = res[0].attachType
                }
            }).then()
        },
        // 上传附件成功
        uploadSucceed(){
            this.getAccessoryList()
        }
    }
}
</script>

<style scoped lang="scss">
    .content{
        // 文本域
        .textarea{
            border: none;
            padding: 30rpx;
            background: #f4f5f7;
            border-radius: 16rpx;
            /deep/.uni-textarea-textarea{
                font-size: 28rpx !important;
            }
        }
    }
</style>
